<template>
  <div id="app">
    <!-- 需求 -->
    <!-- 1.标题写活,能够自定义 -->
    <!-- 2.背景色可控制 -->
    <!-- 3.文字颜色可控制 -->
    <MyHeader 
    title="购物车" 
   />
  
    <MyGoods v-for="item in list" :key="item.id" :obj="item"/>
    
    <MyFooter :arr="list"/>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyGoods from './components/MyGoods.vue'

import MyFooter from './components/MyFooter.vue'
export default {
  data() {
    return {
      // 在此作为 res.data.list的中转 接收数据
    list:[]
    }
  },
  components: {
    MyHeader,
    MyGoods,

    MyFooter
  },
  // 是一个方法
  beforeCreate(){

  },
  created() {
   this.getCar()
  },

  methods: {
    // 获取购物车数据
  async  getCar(){
   const res = await this.$axios({
      url:'https://www.escook.cn/api/cart '
    });
    // console.log(res.data.list);
    // 将数据保存到data里 这样模板才能使用data里面的数据
    this.list=res.data.list
    }
  }
}
</script>

<style scoped>
#app {
  padding:45px 0;
}
</style>
